<template>
  <el-container>
    <!-- 左侧 -->
    <Aside></Aside>
    <el-container>
      <!-- 头部 -->
      <el-header>
        <div class="header">
          <div class="header1">
            <svg
              t="1659958082789"
              class="icon icon1"
              viewBox="0 0 1403 1024"
              version="1.1"
              xmlns="http://www.w3.org/2000/svg"
              p-id="2123"
              width="200"
              height="200"
            >
              <path
                d="M189.62963 113.777778v196.683852h1061.925926V113.777778H189.62963z m0 477.601185h1061.925926v-196.683852H189.62963v196.683852zM189.62963 872.296296h1061.925926v-196.683852H189.62963V872.296296z"
                fill="#2c2c2c"
                p-id="2124"
              ></path>
            </svg>
            <p>个人中心</p>
            <div class="item">
              <div>
                <svg
                  t="1659950135218"
                  class="icon"
                  viewBox="0 0 1024 1024"
                  version="1.1"
                  xmlns="http://www.w3.org/2000/svg"
                  p-id="1882"
                  width="200"
                  height="200"
                >
                  <path
                    d="M554.099652 1024H357.30128c-15.499872 0-27.999768-12.499897-28.099768-27.899769V548.503933H168.002845c-15.499872 0-27.999768-12.499897-28.099767-27.899769V174.007031c0.099999-15.499872 12.599896-27.999768 28.099767-27.999769h161.098668v-20.899827C329.901506 55.208013 387.201032-0.791523 457.100454 0.00847c68.799431 0.799993 124.298972 56.299534 125.098965 125.098965V146.007262h94.699217c7.499938 0 14.699878 2.999975 19.999835 8.299932l179.198517 180.898503c10.799911 10.89991 10.699911 28.499764-0.099999 39.299675-0.199998 0.199998-0.499996 0.499996-0.799993 0.699994L695.998478 541.003995c-5.199957 4.79996-12.0999 7.499938-19.199841 7.499938h-94.699217v447.596298c0 15.399873-12.599896 27.899769-27.999768 27.899769zM385.401047 548.503933v419.596529H525.999884V548.503933H385.401047zM196.102613 419.704998v72.999397h469.696115l149.998759-138.698853-150.698753-152.098742h-468.996121v161.99866h365.696975c15.399873 0 27.899769 12.499897 27.899769 27.899769s-12.499897 27.899769-27.899769 27.899769H196.102613zM455.700466 55.308013c-38.69968-0.099999-70.09942 31.099743-70.299419 69.799422V146.007262H525.999884v-20.899827c-0.199998-38.69968-31.699738-69.899422-70.299418-69.799422z m190.498424 364.396985c-1.899984 0-3.699969-0.199998-5.499955-0.599995-1.799985-0.299998-3.59997-0.899993-5.299956-1.599986-1.699986-0.699994-3.299973-1.599987-4.899959-2.599979-1.499988-0.999992-2.999975-2.199982-4.299965-3.499971-1.299989-1.299989-2.499979-2.699978-3.499971-4.199965-1.999983-2.999975-3.499971-6.499946-4.199965-9.999917-0.799993-3.59997-0.799993-7.29994 0-10.89991 0.399997-1.799985 0.899993-3.59997 1.599987-5.199957 0.699994-1.699986 1.599987-3.299973 2.599978-4.799961s2.199982-2.999975 3.499971-4.199965c2.599978-2.599978 5.699953-4.599962 9.099925-5.99995 1.699986-0.699994 3.499971-1.299989 5.299956-1.599987 3.59997-0.699994 7.399939-0.699994 10.999909 0 1.799985 0.299998 3.59997 0.899993 5.299956 1.599987 5.099958 2.099983 9.499921 5.699953 12.599896 10.299915 1.999983 2.999975 3.499971 6.499946 4.199966 9.999917 0.399997 1.799985 0.499996 3.59997 0.499995 5.399955 0 1.799985-0.199998 3.699969-0.499995 5.399956-0.399997 1.799985-0.899993 3.499971-1.599987 5.199957-0.699994 1.699986-1.599987 3.299973-2.599979 4.79996s-2.199982 2.999975-3.499971 4.199965c-1.299989 1.299989-2.699978 2.499979-4.299964 3.499971-1.499988 0.999992-3.099974 1.899984-4.799961 2.599979-1.699986 0.699994-3.499971 1.299989-5.299956 1.599986-1.699986 0.399997-3.59997 0.599995-5.399955 0.599995z"
                    fill="#333333"
                    p-id="1883"
                  ></path>
                </svg>
                <svg
                  t="1659950055702"
                  class="icon"
                  viewBox="0 0 1025 1024"
                  version="1.1"
                  xmlns="http://www.w3.org/2000/svg"
                  p-id="12879"
                  width="200"
                  height="200"
                >
                  <path
                    d="M401.271618 64.685719a335.31276 335.31276 0 1 1-126.692351 24.641081A335.55533 335.55533 0 0 1 401.271618 64.685719m0-64.685365a399.967803 399.967803 0 0 0-283.736289 117.535329c-156.659868 156.659868-156.659868 410.772281 0 567.472577a401.251404 401.251404 0 0 0 567.472577 0c156.659868-156.659868 156.659868-410.772281 0-567.472577A399.988018 399.988018 0 0 0 401.271618 0.000354z"
                    fill="#333333"
                    p-id="12880"
                  ></path>
                  <path
                    d="M625.598272 670.114812m7.14679-7.14679l31.445879-31.445879q7.146791-7.146791 14.293581 0l343.789217 343.789217q7.146791 7.146791 0 14.293581l-31.445878 31.445879q-7.146791 7.146791-14.293582 0l-343.789217-343.789217q-7.146791-7.146791 0-14.293581Z"
                    fill="#333333"
                    p-id="12881"
                  ></path>
                </svg>
                <svg
                  t="1659949779376"
                  class="icon"
                  viewBox="0 0 1024 1024"
                  version="1.1"
                  xmlns="http://www.w3.org/2000/svg"
                  p-id="10085"
                  width="200"
                  height="200"
                >
                  <path
                    d="M977.454545 81.454545v236.125091a34.909091 34.909091 0 0 1-69.818181 0V165.701818l-269.870546 269.870546a34.816 34.816 0 0 1-49.338182 0 34.909091 34.909091 0 0 1 0-49.384728L858.251636 116.363636h-151.831272a34.909091 34.909091 0 1 1 0.046545-69.818181h236.078546a34.909091 34.909091 0 0 1 34.90909 34.90909zM386.280727 588.381091L116.363636 858.251636v-151.924363a34.909091 34.909091 0 1 0-69.818181 0.046545v236.171637a34.909091 34.909091 0 0 0 34.90909 34.90909h236.171637a34.909091 34.909091 0 0 0 0-69.818181H165.748364l269.917091-269.917091a34.909091 34.909091 0 1 0-49.384728-49.338182zM165.748364 116.363636h151.924363A34.909091 34.909091 0 1 0 317.626182 46.545455H81.454545a34.909091 34.909091 0 0 0-34.90909 34.90909v236.125091a34.909091 34.909091 0 0 0 69.818181 0V165.701818l269.917091 269.870546a34.816 34.816 0 0 0 49.338182 0 34.909091 34.909091 0 0 0 0-49.384728L165.748364 116.363636zM942.545455 671.464727a34.909091 34.909091 0 0 0-34.909091 34.909091v151.924364l-269.870546-269.917091a34.909091 34.909091 0 1 0-49.384727 49.384727l269.870545 269.917091h-151.831272A34.909091 34.909091 0 1 0 706.466909 977.454545h236.078546a34.909091 34.909091 0 0 0 34.90909-34.90909v-236.171637a34.909091 34.909091 0 0 0-34.90909-34.909091z"
                    p-id="10086"
                  ></path>
                </svg>

                <svg
                  t="1659949952991"
                  class="icon"
                  viewBox="0 0 1024 1024"
                  version="1.1"
                  xmlns="http://www.w3.org/2000/svg"
                  p-id="11459"
                  width="200"
                  height="200"
                >
                  <path
                    d="M965.911 310.531l-174.4-174.398c-13.022-13.021-30.933-19.649-49.381-18.228-1.74-0.15-3.422-0.224-5.07-0.224l-92.914 0-6.517 3.625c-34.421 19.146-78.341 29.689-123.668 29.689-45.328 0-89.246-10.543-123.667-29.689l-6.518-3.625L290.86 117.681c-23.691 0-44.986 12.924-55.995 33.451L62.477 323.521c-11.9 11.899-18.454 27.72-18.454 44.548 0 16.829 6.554 32.649 18.453 44.549l125.953 125.955c10.54 10.538 24.157 16.878 38.826 18.181l0 304.399c0 35.073 28.533 63.606 63.604 63.606l446.199 0c35.074 0 63.607-28.533 63.607-63.606l-0.001-317.345c14.844-1.211 28.639-7.577 39.288-18.224L965.91 399.628C990.475 375.064 990.475 335.095 965.911 310.531z"
                    p-id="11460"
                    fill="#dbdbdb"
                  ></path>
                </svg>
                <svg
                  t="1659949909291"
                  class="icon"
                  viewBox="0 0 1024 1024"
                  version="1.1"
                  xmlns="http://www.w3.org/2000/svg"
                  p-id="10412"
                  width="200"
                  height="200"
                >
                  <path
                    d="M651.3 390.041h325.224a47.76 47.76 0 0 1 46.623 48.897v536.165A47.76 47.76 0 0 1 976.524 1024H419.322a47.76 47.76 0 0 1-46.623-48.897V633.959H46.907A47.76 47.76 0 0 1 0.284 585.062V48.897A47.76 47.76 0 0 1 46.907 0h557.77A47.76 47.76 0 0 1 651.3 48.897zM46.907 585.061h557.77V48.898H46.907v536.165z m635.665-16.488l-102.343 278.6h45.485l25.018-71.64h113.714l25.018 71.64h43.78l-102.912-278.6z m-22.175 170.572l44.35-126.223 47.19 126.223z m-354.22-625.43h35.251v71.071h135.32v188.198h-35.251V350.81H341.428V481.58h-33.546V350.81h-97.226v22.174h-35.251V184.786h132.477z m-95.52 200.706h96.657v-93.246h-96.658z m130.771 0h100.069v-93.246H341.428z"
                    p-id="10413"
                  ></path>
                </svg>

                &emsp;<img
                  class="img"
                  src="https://m.imooc.com/static/wap/static/common/img/logo-small@2x.png"
                  alt=""
                />
                <el-button type="info" @click="tuichu">退出</el-button>
              </div>
            </div>
          </div>
          <div class="tag">
            <el-tag v-for="item in data.RouterName" :key="item" closable>
              {{ item }}
            </el-tag>
          </div>
        </div>
      </el-header>
      <el-main>
        <router-view />
      </el-main>
    </el-container>
  </el-container>
</template>

<script setup>
import Aside from "@/components/Aside.vue";
import { ref, reactive, watch } from "vue";
import { useRouter } from "vue-router";
import { ElMessageBox } from "element-plus";

const data = reactive({
  // RouterName:JSON.parse(localStorage.getItem('RouterName')||[]),
  RouterName:[]
});
const route = useRouter();
watch(
  () => route.currentRoute.value.name,
  (newVal, oldVal) => {
    if (!data.RouterName.includes(newVal)) {
      data.RouterName.push(newVal);
    }
  },
  { deep: true, immediate: true }
);

const router = useRouter();
const tuichu = () => {
  ElMessageBox.confirm("你是否要出退吗").then(() => {
    localStorage.removeItem("vuex");
    router.push("/");
  });
  餐巾纸
};
</script>

<style lang="scss" scoped>
.el-button {
  margin-top: -14px;
}
.img {
  width: 25px;
  height: 25px;
  margin-left: 10px;
}

.icon {
  width: 25px;
  height: 25px;
  margin-left: 30px;
  margin-top: 17px;
}
.el-container {
  height: 100%;
}
.tag {
  width: 100%;
  height: 32px;
  background-color: #fff;
  line-height: 32px;
  .el-tag {
    margin-left: 10px;
  }
}
.el-header {
  width: 100%;
  height: 82px;
  background-color: #fff;
  .header1 {
    height: 50px;
    width: 100%;
    line-height: 51px;
    background-color: #fff;
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1px solid red;
    p {
      margin-left: -723px;
    }
    .icon1 {
      margin-top: 1px;
    }

    .item {
      img {
        margin-right: 40px;
      }
    }
    #guide-hamburger {
      display: inline-block;
      vertical-align: middle;
      width: 20px;
      height: 20px;
    }
  }
}
.el-main {
  width: 100%;
  height: 100%;
  background-color: #f6f6f6;
}
</style>